<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>地图背景功能</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>
    <div id="mapContainer" style="position: relative;"></div>
</body>
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    window.app = new GE.App('mapContainer', {
        position: [119.71034982966391, 30.560457858850327, 1000], //相机的位置
        lookAt: [119.71034982966391, 30.560457858850327, 0], //相机看向的地图位置
        cameraScrollSpeed: 5, //鼠标滚动时，控制相机移动的速度
        minZoom: 3, //允许地图的最小层级
        maxZoom: 18, //允许地图的最大层级
        ambientLightIntensity: 5,
        useDefaultTexture: false, //是否使用瓦片默认纹理
        background: "None", //背景的类型，参数有如下类型：None, Fog, Color, Gradient, Image, Sky。使用Fog地图的性能会比较好
        // backGroundColorA:'#AAAAFF', //当background的值为Gradient时，需要配置该参数。最下端颜色，默认值为#0000FF
        // backGroundColorB:'#0000FF', //当background的值为Gradient时，需要配置该参数。最上端颜色，默认值为#FF0000
        // backGroundColor: '#F5F5F5', //当background的值为Color时，需要配置该参数，默认值为#00BFFF
        // imageUrl: 'http://localhost:9000/examples/assets/img_logo.39362dc1.png', //当background的值为Image时，需要配置该参数。默认值为null
        maxSlopeAngle: 75, //地图最大倾斜角度
        // extraStep: 4, //额外加载瓦片的步长
        baseLayer: [
            //影像底图
            {
                url: ' https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', //影像底图的url
                // url: 'http://115.236.87.26:8848/googleTiles/china_image/{z}/{y}/{x}.jpg',
                urlDecimal: true, //影像底图url中的瓦片行列号是否是十进制，true表示十进制，false表示十六进制
                tileType: 'image', //影像底图
                canNotSelect: true, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            }
        ]
    });

    btn();
    
    function btn() {
        let button0 = new GE.Button('无背景', function () {
            window.app.options.BackGround.background = "None";
            window.app.background.set(window.app.options.BackGround);
        });
        app.ui.add(button0);

        let button = new GE.Button('雾', function () {
            window.app.options.BackGround.background = "Fog";
            window.app.background.set(window.app.options.BackGround);
        });
        app.ui.add(button);
        window.button = button;

        let button2 = new GE.Button('背景颜色', function () {
            window.app.options.BackGround.background = "Color";
            let color = prompt('背景颜色：', window.app.options.BackGround.backGroundColor) || null;
            if(color){
                window.app.options.BackGround.backGroundColor = color;
                window.app.background.set(window.app.options.BackGround);
            }
        });
        app.ui.add(button2);

        let button3 = new GE.Button('背景渐变颜色', function () {
            window.app.options.BackGround.background = "Gradient";
            let backGroundColorA = prompt('背景下端颜色：', window.app.options.BackGround.backGroundColorA) || null;
            let backGroundColorB = prompt('背景上端颜色：', window.app.options.BackGround.backGroundColorB) || null;
            if(backGroundColorA && backGroundColorB){
                window.app.options.BackGround.backGroundColorA = backGroundColorA;
                window.app.options.BackGround.backGroundColorB = backGroundColorB;
                window.app.background.set(window.app.options.BackGround);
            }
        });
        app.ui.add(button3);

        let button4 = new GE.Button('背景图片', function () {
            window.app.options.BackGround.background = "Image";
            window.app.options.BackGround.imageUrl = prompt('背景图片：', window.app.options.BackGround.imageUrl);
            window.app.background.set(window.app.options.BackGround);
        });
        app.ui.add(button4);

        let button5 = new GE.Button('天空球', function () {
            window.app.options.BackGround.background = "Sky";
            window.app.background.set(window.app.options.BackGround);
        });
        app.ui.add(button5);
    }
</script>

</html>